import './Scss.scss';
import { Menu } from 'antd'
import { useState } from 'react'
import { treeValue } from '../../Utils/configFun'
import {
    ContainerOutlined,
    HomeOutlined,
    CloseCircleOutlined,
    FormOutlined
} from '@ant-design/icons'

import { GetIndexedDB } from '../../Utils/IndexedDB'

import { useMount } from 'ahooks';

const items = [
    { key: '11111111-1111-1111-1111-111111111111', icon: <HomeOutlined />, label: '首页', type: 'Custom', page: 'Home' },
    {
        key: 'tableMapping',
        label: '数据映射',
        icon: <FormOutlined />,
        children: [
            { key: 'tableMapping_1', label: '自定义Table', type: 'Custom', page: 'SetTable', },
            { key: 'tableMapping_2', label: '自定义Front', type: 'Custom', page: 'SetFront' },

            // 模拟菜单
            // 模拟权限
        ],
    },
    {
        key: 'sub1',
        label: '错误页面',
        icon: <CloseCircleOutlined />,
        children: [
            { key: '1-1', danger: true, label: '未定义 - Custom', type: 'Custom', page: 'A02' },
            { key: '1-2', danger: true, label: '未定义 - ProTable', type: 'ProTable', page: 'A02' },
            { key: '1-3', danger: true, label: '未定义 - 菜单属性' },
        ],
    },
    {
        key: 'sub2',
        label: '组件页面',
        icon: <ContainerOutlined />,
        children: [
            { key: '2-1', label: 'Form组件', type: 'Custom', page: 'FormTemplate' },
            { key: '2-2', label: 'Table组件', type: 'ProTable', page: 'Base' },
            {
                key: '2-3',
                label: 'Wijmo组件',
                children: [
                    { key: '2-3-1', label: '基础-通用组件', type: 'Wijmo', page: 'A01' },
                    { key: '2-3-2', label: '基础-树形组件', type: 'Wijmo', page: 'A02' },
                    { key: '2-3-3', label: '复合-通用组件', type: 'Wijmo', page: 'A03' },
                    { key: '2-3-4', label: '枢纽-通用组件', type: 'Wijmo', page: 'A04' },
                ],
            },
        ],
    },

]

const A01 = ({ collapsed, PageEvent }) => {
    const onSelect = ({ key }) => {
        PageEvent.emit({ type: 'openPage', data: treeValue(items, key, 'key') })
        setSelectKey(key)
    }

    const [MaskConfig, setMaskConfig] = useState()

    const getThemeConfig = async () => {
        const { menuConfig } = await GetIndexedDB('theme')
        setMaskConfig(menuConfig.MaskConfig)
    }

    useMount(() => { getThemeConfig() })

    const [SelectKey, setSelectKey] = useState('11111111-1111-1111-1111-111111111111')
    PageEvent.useSubscription(val => {
        const { type, data } = val
        if (type === 'openPage') setSelectKey(data.key)
        if (type === 'updateMenu') getThemeConfig()
    })

    if (MaskConfig) {
        return (
            <div className='MenuA01' style={{ width: collapsed ? 264 : 112 }}>
                <div className='Mask'
                    style={{
                        background: MaskConfig.back,
                        backdropFilter: `blur(${MaskConfig.blur}px)`,
                        borderRadius: MaskConfig.radio,
                        boxShadow: `var(${MaskConfig.shoadow})`
                    }}
                />
                <Menu
                    selectedKeys={[SelectKey]}
                    mode="inline"
                    inlineCollapsed={!collapsed}
                    items={items}
                    onSelect={onSelect}
                />
            </div>
        )
    }
}

export default A01;